Home:ALL Converter>Angular + Web API Error Only In Production

Angular + Web API Error Only In Production

Ask Time:2021-03-17T03:23:30         Author:Thomas G

Json Formatter

About the App

I have an Angular 8 App that uses .Net REST APIs that I inherited from a previous employee (I am new to both frameworks). It has been under development for a few months and has been successfully published to the Production server for testing several times throughout development.

The Issue

After the last publish to the Production server, I am receiving two errors in the console stating Unexpected token < in JSON at position 0 for the API call api/MtUsers/GetLoggedInUser which is called on the backend of the home component. I did not update any code in the home component or the MTUsersController since the last time changes were published to production.

Observations

  • Error only appears in production
  • Error still exists if I checkout an older (previously working) commit and publish
  • Visual Studio started complaining about experimental decorators and missing modules on publish (fixed by restarting VS)
  • Calling the API using postman appears to return index.html in production but returns the MtUser object in localhost

What I've Tried

  • Clean solution and re-publish
  • Checkout last known working commit and publish
  • Recycle application pool and restart website in IIS
  • Try various code changes related to website configuration

Relevant Code

I'm not too sure what is most "relevant" to this issue, so I am providing the code specified in the error and the startup.cs file. Let me know if something else would be more useful.

home.component.ts

import { Component } from '@angular/core';
import { MtUser } from 'src/app/core/models/mtUser.model'
import { MtUserService } from 'src/app/core/services/mtUser.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  loadingLoggedInUserInfo = true;
  loggedInUser: MtUser = <MtUser>{};

  /** home ctor */
  constructor(
    private mtUserService: MtUserService){
    document.getElementsByClassName('main-content')[0].scroll(0, 0);
    this.mtUserService.GetLoggedInUser()
      .subscribe(response => {
        this.loadingLoggedInUserInfo = false;
        this.loggedInUser = response;
      });
  }
}

MtUserService

import { Injectable } from '@angular/core';
import { MtUser } from 'src/app/core/models/mtUser.model';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root', })
export class MtUserService {
  constructor(private http: HttpClient) { }
  GetLoggedInUser() {
    return this.http.get<MtUser>(environment.apiUrl + '/MtUsers/GetLoggedInUser');
  }
}

MtUsersController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MT8.Data;
using MT8.Models;
using MT8.Utilities;

namespace MT8.Controllers
{
    [Authorize]
    [Route("api/[controller]")]
    [ApiController]
    public class MtUsersController : Mt8ControllerBase
    {
        private readonly Mt8Context _context;

        public MtUsersController(Mt8Context context)
        {
            _context = context;
        }
        // GET: api/MtUsers/GetLoggedInUser
        [HttpGet("GetLoggedInUser")]
        public async Task<ActionResult<MtUser>> GetLoggedInUser()
        {
            var loggedInUserName = ApplicationEnvironment.GetLoggedInUserName(this.HttpContext);
            var loggedInUser = await this._context.MtUsers
                .SingleOrDefaultAsync(u => u.UserName == loggedInUserName);

            if (loggedInUser == null)
                return NotFound();

            return loggedInUser;
        }
    }
}

Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.EntityFrameworkCore;
using MT8.Data;
using Microsoft.AspNetCore.Server.IISIntegration;
using System.Threading.Tasks;
using MT8.Utilities;

namespace MT8
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });

            services.AddCors(options =>
            {
                options.AddPolicy(MyAllowSpecificOrigins,
                builder =>
                {
                    builder.WithOrigins("http://example.com",
                                        "http://www.contoso.com");
                });
            });

            services.AddDbContext<Mt8Context>(options =>
                    options.UseSqlServer(Configuration.GetConnectionString("Mt8Context")));

            services.AddAuthentication(IISDefaults.AuthenticationScheme);

            services.AddControllers()
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToIntJsonConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToNullableIntConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToDecimalJsonConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToDoubleJsonConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToDateTimeJsonConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToNullableDateTimeConverter()));

        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env, Mt8Context dbContext)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            if (!env.IsDevelopment())
            {
                app.UseSpaStaticFiles();
            }

            app.UseRouting();

            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

            if (!env.IsProduction())
                dbContext.InitializeData();
        }
    }
}

Author:Thomas G,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/66662060/angular-web-api-error-only-in-production
yy